import React,{Component } from 'react'
import {connect} from 'react-redux'
import {Button, Card,Select,Table,Form,Input,Tag} from 'antd';
import {PlusCircleOutlined} from '@ant-design/icons';

import Mybtn from '../../../component/mybutton/mybutton';
import {GetProducts,SearchProduce,UpdateState} from '../../../reudx/action'

import './home.less';

const { Option } = Select;
class Home extends Component{
    
    state = {
       dataSource : [
            {
              key: '1',
              name: '联想笔记本i9-10200',
              detail: '年度新产品，销量第一fefafafafafafafeawfwfawfewaefwafawfwefwaefeweafawfwffeafafeafafeafewafwfefaefafefwaefawfeawfawfewafwafaqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqaaaa',
              price:'￥9000',
              status: 0,
            },
            {
                key: '2',
                name: '华硕飞行堡垒i7-10200',
                detail: '系统全面升级',
                price:'￥8000',
                status: 0,
                filtered:true,
              },
              {
                key: '3',
                name: 'iphone Pro',
                detail: '世界系统排名第一',
                price:'￥19000',
                status: 1,
              },
              {
                key: '4',
                name: '华为P30 Pro',
                detail: '开启全新5G时代',
                price:'￥5000',
                status: 0,
              },
              {
                key: '5',
                name: '联想笔记本i9-10200',
                detail: '年度新产品，销量第一fefafafafafafafeawfwfawfewaefwafawfwefwaefeweafawfwffeafafeafafeafewafwfefaefafefwaefawfeawfawfewafwafaqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqaaaa',
                price:'￥9000',
                status: 0,
              },
              {
                key: '6',
                name: '机械革命 i7-8500',
                detail: '高清屏幕，视觉盛宴',
                price:'￥8000',
                status: 1,
              },
          ],
          
           columns :[
            {
              title: '商品名称',
              dataIndex: 'name',
              key: 'name',
              width:'20%'
            },
            {
              title: '商品描述',
              dataIndex: 'desc',
              key: 'desc',
              width:'40%'
            },
            {
              title: '价格',
              dataIndex: 'price',
              width:'10%',
              render:(price)=>'￥'+price
            },
            {
                title: '状态',
                key: 'status',
                width:'20%',
                ellipsis: true,
                render: (item) => (
                    <div>
                    <Tag color={item.status===0?'magenta':"cyan"}>
                        {item.status===0?'已下架':"售卖中"}
                    </Tag>&nbsp;&nbsp;&nbsp;
                    <Button type={item.status===0?"primary":'dashed' } size='small' danger={"true"} onClick={()=>this.ChangeState(item._id,item.status)}>
                        {item.status===0?'上架':'下架'}
                    </Button>
                    </div> 
                  ),
            },
            {
                title: '操作',
                key: 'option',
                width:'10%',
                render: (item) => (
                  <div>
                    <Mybtn size="middle" onClick={()=>this.props.history.push('/product/commodity/detail',item)}>
                        详情
                    </Mybtn>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                    <Mybtn size="middle" onClick={()=>this.props.history.push('/product/commodity/add-update',{item,title:'修改商品'})}>
                        修改
                    </Mybtn>
                  </div>
                  )
            }
          ],  
          pageNum:1,//当前页码
          pageSize:5,//当前页容量
          searchKey:'',//搜索关键字，如果搜索关键字为空默认是展示所有商品
          searchType:'productName',//搜素的类型 productName productDesc，默认按名字
         
    }

    //修改商品当前的状态
    ChangeState =  (id,state)=>{
      const newState = (state===0?1:0)
      UpdateState(id,newState)
     //console.log("修改状态",id,state)
     //重新请求数据
     this.props.GetProducts({pageNum:this.state.pageNum,pageSize:this.state.pageSize})
    }
    //点击添加商品的回调函数
    addProduce = ()=>{
      //this.setState({isModalVisible:true})
    }

    //页码发生变化是的回调函数
    PageChange = (pageNum,pageSize) =>{
      console.log("当前的页和页大小",pageNum,pageSize)
      //发送请求获取当前的页的数据
      this.setState({pageNum,pageSize})
      //切换页码发送请求的时候需要注意
      //1.在所有商品中点击分页
      //2.在搜索商品中点击分页
      if(this.state.searchKey){
        this.props.SearchProduce(pageNum,pageSize,this.state.searchType,this.state.searchKey)
      }else{
        this.props.GetProducts({pageNum,pageSize})
      }
      
      //请求回来的数据,这里查看不到数据，因为上一步操作是异步进行的，想要看到操作，可以把函数加上async,上面语句前加await，这样会等待上面执行结束再去执行下面
      //console.log("当前页面请求回来的数据",this.props.ProduceList)
    }
    //表单提交成功触发的回调函数
    onFinish = (values)=>{
        //console.log("表单提交成功")
        //console.log("表单中的值为",values)
        this.setState({pageNum:1,pageSize:5})
        this.setState({searchKey:values.key},()=>{
          //状态修改成功之后发送请求获取数据,开始肯定在第一页
          //console.log("发送请求获取数据")
          this.props.SearchProduce(1,5,this.state.searchType,this.state.searchKey)
        })
    }

    handleChange = (value) =>{
      console.log("当前的选项为",value)
      this.setState({searchType:value})
    }
    async componentDidMount(){
      //初始化默认是第一页的数据，默认发送请求获取第一页数据
      await this.props.GetProducts({pageNum:1,pageSize:5})
      //请求回来的数据，因为上一步操作是异步进行的，想要看到操作，
      //可以把函数加上async,上面语句前加await，这样会等待上面执行结束再去执行下面
      //console.log("初始化数据",this.props.ProduceList)
    }
    render(){
      //console.log("数据",this.props.ProduceList)
        return(
            <Card 
            title={
                <div className="card_span">
                    <Select defaultValue="productName" style={{ width: 120}} onChange={this.handleChange}>
                        <Option value="productName">按名称搜索</Option>
                        <Option value="productDesc">按描述搜索</Option>
                    </Select>
                    <Form
                    initialValues={{ remember: true }}
                    onFinish={this.onFinish}
                    >
                        <Form.Item
                        name="key"
                        rules={[{ required: true, message: '请输入关键字' }]}
                        >
                        <Input style={{ width: 120}} placeholder="关键字"/>
                        </Form.Item>
                            <Form.Item >
                            <Button style={{marginLeft:20}} type="primary" htmlType="submit">
                                查找
                            </Button>
                            </Form.Item>
                        </Form>
                </div>
            } 
            extra={
            <Button type="primary" 
              icon={<PlusCircleOutlined />}
              onClick={()=>this.props.history.push('/product/commodity/add-update',{title:'添加商品'})}
            >添加商品
            </Button>} 
            >
            <Table 
            dataSource={this.props.ProduceList.list} 
            columns={this.state.columns}
            bordered
            // 这里指定一下current，不然有页面显示bug
            pagination={{current:this.state.pageNum,defaultCurrent:1,pageSize:5,total:this.props.ProduceList.total,showQuickJumper:true, showSizeChanger:false,onChange:this.PageChange}} 
            />
          </Card>
        )
    }
}
export default connect(
  state=>({ProduceList:state.productsList}),
  {GetProducts,SearchProduce}
)(Home)